import './element.scss';

export function createMarker(site) {
  const htmlStr = `<div class="marker t-${site?.type}"></div>`;

  const template = document.createElement('template');
  template.innerHTML = htmlStr;

  return template.content;
}

export function createPopup(site) {
  const htmlStr = `<div class="popup">
  <div class="popup-header">
    <span class="popup-title">${site.name}</span>
  </div>
  <div class="popup-main">
    <ul class="popup-list">
    ${site.points
      .map(
        (item) => `<li class="point">
        <span class="point-name">${item.name}</span>
        <span class="point-value">
          ${item.value}<span class="point-unit">${item.unit}</span>
        </span>
      </li>`
      )
      .join('')}
    </ul>
  </div>
</div>`;

  const template = document.createElement('template');
  template.innerHTML = htmlStr;

  return template.content;
}
